<!-- 简易实现图片切换效果 -->
<!-- 本地引入图片路径前要加上 require 
然后默认显示第一张图片
当点击切换按钮时候就在数组中自动切换下一张照片 -->
<template>
    <div class="pic">
        <div class="show">
            <img :src="url[i]" alt="avatar">
            <span>图片序号：{{ i+1 }}</span>
        </div>
        <button @click="change">点击切换</button>

        <p>↓↓↓↓↓↓↓↓这里实现以下点击图片直接进行切换，使用 v-for:</p>
        <div v-for="(item, index) of imgUrl" :key="index" @click="changeMe(index)"> 
            <div v-if="item.isShow">
                <img :src="item.url" alt="myImg"  >
                <span>图片号码：{{ index }}</span>
            </div>
        </div>
    </div>
</template>


<script>
    export default {
        name: "TestPicChange",
        data() {
            return {
                i: 0,
                url: [
                    require('../assets/images/1.jpg'),
                    require('../assets/images/2.jpg'),
                    require('../assets/images/3.jpg'),
                ],
                imgUrl: [
                    {url: require('../assets/images/1.jpg'), isShow:true},
                    {url: require('../assets/images/2.jpg'), isShow:false},
                    {url: require('../assets/images/3.jpg'), isShow:false},
                    {url: require('../assets/images/4.jpg'), isShow:false},
                    {url: require('../assets/images/5.jpg'), isShow:false},
                    {url: require('../assets/images/6.jpg'), isShow:false},
                ],
            }
        },
        methods: {
            change: function() {
                if(this.i < this.url.length-1) {
                    this.i++;
                }
            },
            changeMe: function(index){
                console.log(index)
                for(let i = 0; i < this.imgUrl.length; i++) {
                    if(index === this.imgUrl.length-1) {
                        this.imgUrl[0].isShow = true;
                        this.imgUrl[this.imgUrl.length-1].isShow = false
                        return
                    }
                    this.imgUrl[index].isShow = false;
                    this.imgUrl[index+1].isShow = true;
                }
            }
        }
    }
</script>


<style>
    img {
        width: 120px;
    }
</style>